<template>
<!--  新增编辑会员-->
  <div>
    <div class="padding15 minMaxWidth600 marginAuto">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="名称" prop="userName">
          <el-input :disabled="ruleForm.id?true:false" class="wid260" v-model="ruleForm.userName" placeholder="请输入会员名称"></el-input>
        </el-form-item>
       
        <el-form-item label="晋级方式" prop="roleId">
          <el-select  :disabled='disabled' filterable class="wid260" v-model="ruleForm.roleId" placeholder="请选择">
            <el-option v-for="(item,index) in roles" :key="index+'roleId'" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="晋升值范围" prop="phone">
          <el-button size="mini" type="primary" :disabled='disabled' @click="add">添加等级范围</el-button>
         
          <el-table
          :data="ruleForm.lists"
          stripe
          border
          style="width: 100%">
          <el-table-column align="center" type="index" label="序号" width="50" />
            <el-table-column align="center" prop="organizationName" label="等级">
              <template slot-scope="scope">
                <el-input v-model="scope.row.name" placeholder="请输入等级"></el-input>
              </template>
            </el-table-column>
            <el-table-column align="center" prop="title" label="排序">
              <template slot-scope="scope">
                <el-input type="number" min="0" v-model="scope.row.num" placeholder="请输入排序"></el-input>
              </template>
            </el-table-column>

            <el-table-column label="操作" align="center" fixed="right">
              <template slot-scope="scope">
                <el-button size="mini"  type="danger" @click="handleDelete(scope.row,scope.$index)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
         
        </el-form-item>
      
        <el-form-item>
          <el-button type="primary" :loading="isLoading" :submitDisbled="submitDisbled" @click="submitForm('ruleForm')">确定</el-button>
          <el-button @click="goback">返回</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
//  import {} from '@/assets/api/api'
import {AddEditmixin} from '@/assets/mixins/addEditmixin'
  export default {
    name:'AddEditVip',
    mixins: [AddEditmixin],
    components:{
      UploadImg:()=>import('@/components/uploadImg.vue'),
    },
    data(){
      return{
          
        goBackPath:'/vip/vipLeaceList',//返回的路径
          isLoading:false,
        page:this.$route.query.page?this.$route.query.page:1,
        submitDisbled:false,
          infoName:'',//编辑取得名字查重要
        msg1:'新增账号',
          roleName:'',//角色名称
        ruleForm:{
          name: "",
          roleId:'',
          lists:[],
        },
        disabled:false,
        rules: {
          name: [
            { required: true, message: '请输入账号名', trigger: 'blur' },
            { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' },
          ],
        
          roleId: [
            { required: true, message: '请选择会员等级', trigger: 'change' },
          ],
         
          
        },
        products:[],
        organizations:[],
        roles:[],
      }
    },
    created() {
     
        
      },
    methods:{
      add(){//添加范围
         this.ruleForm.lists.push({name:'',num:1});
      },
      handleDelete(v,i){
          console.log(i,'scope');
          this.ruleForm.lists.splice(i,1);
      },
      callbackUrl(url){//图片的上传地址
           console.log(url,'callbackUrl')
      },
     
      submitForm(formName) {
        let that = this;
        that.isLoading = true;
      
        this.$refs[formName].validate((valid) => {
          if (valid) {
        
            that.isLoading = false;
          } else {
            that.isLoading = false;
            return false;
          }
        });
      },
    }
  }
</script>
<style lang="scss" scoped>

</style>
